<template>
  <div>
    <svg
      v-if="isFullscreen"
      t="1508738709248"
      class="screenfull-svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2069"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="32"
      height="32"
      @click="click"
    >
      <!-- <path
        d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
        p-id="2070"
      />
      <path
        d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
        p-id="2071"
      />
      <path
        d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
        p-id="2072"
      />
      <path
        d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
        p-id="2073"
      /> -->
      <path fill="#fff" d="M968.920347 9.508317L694.235633 283.250765l0.942266-155.13119c0.385472-12.849077-9.993727-24.270479-22.842804-23.842176H655.874c-12.849077 0.371196-23.642302 7.952151-23.842177 21.001102l-0.756668 230.997852c0 0.185598 0.942266 0.371196 0.942266 0.57107l-1.327738 11.735491c-0.185598 6.424539 1.327738 12.292284 5.482273 16.461095a22.071859 22.071859 0 0 0 16.461095 6.624413l11.735491-0.185598a0.699561 0.699561 0 0 0 0.57107-0.185598l229.099044 0.942266A24.670228 24.670228 0 0 0 917.995171 368.197441v-16.461095c-1.898808-15.318955-14.005494-24.270479-26.868847-23.842176l-150.976656-0.371196L1014.091991 54.722791a31.965648 31.965648 0 0 0 0-45.214474 31.637283 31.637283 0 0 0-45.214474 0M54.251659 1013.9635l274.827481-272.800182-0.942266 154.374522c-0.371196 12.849077 9.993727 24.270479 22.842804 23.842176h17.403361c12.849077-0.371196 23.642302-7.952151 23.842176-21.001102l0.756668-231.18345c0-0.185598-0.942266-0.385472-0.942265-0.57107l1.327738-11.73549c0.185598-6.438815-1.327738-12.292284-5.482273-16.461096a22.057582 22.057582 0 0 0-16.446819-6.624413l-11.721214 0.185598a0.699561 0.699561 0 0 0-0.57107 0.185598l-230.055586-0.942266A24.670228 24.670228 0 0 0 105.276771 655.30293v16.461095c1.898808 15.318955 14.005494 24.270479 26.868848 23.827899l150.962379 0.385473L9.365549 968.749026a31.979925 31.979925 0 0 0 0 45.214474 31.180427 31.180427 0 0 0 44.843279 0m576.780792-346.625268l0.571071 231.183449c0.385472 12.849077 10.978823 20.61563 23.842176 21.001103h16.461095c12.849077 0.371196 23.071232-10.978823 22.842804-23.842176l-0.856605-155.131191 274.884588 273.556851a31.979925 31.979925 0 1 0 45.214475-45.214475L740.206775 696.091611l150.976656-0.385473c12.849077 0.385472 24.784442-8.694542 26.854571-23.827899v-16.461095a24.927209 24.927209 0 0 0-23.842177-24.027775l-229.099043 0.942266c-0.185598 0-0.371196-0.185598-0.57107-0.185598l-11.735491-0.185597a21.657833 21.657833 0 0 0-16.461095 6.624413c-4.154535 4.168812-5.710701 9.993727-5.482273 16.461095l1.327738 11.73549c-0.185598 0.185598-1.14214 0.385472-1.14214 0.57107m-347.93873-339.786704l-150.962379 0.371196c-12.849077-0.371196-24.784442 8.708819-26.868847 23.842176v16.461095a24.941486 24.941486 0 0 0 23.842176 24.027775l230.241184-0.942266c0.185598 0 0.385472 0.185598 0.57107 0.185598l11.721214 0.185597a21.657833 21.657833 0 0 0 16.446818-6.624413c4.168812-4.168812 5.710701-9.993727 5.482273-16.461095l-1.327738-11.73549c0-0.185598 0.942266-0.385472 0.942266-0.57107L392.610688 125.15001c-0.185598-12.849077-10.964546-20.61563-23.842177-21.001102h-17.36053c-12.849077-0.385472-23.085508 10.978823-22.842804 23.842176l0.756668 154.374523L54.580024 9.365549A31.971359 31.971359 0 1 0 9.365549 54.580024L283.107998 327.565804M110.502063 64.702241z" />
    </svg>
    <svg
      t="1556073616873"
      class="screenfull-svg"
      style=""
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1987"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="32"
      height="32"
      @click="click"
      v-if="!isFullscreen"
    >
      <!-- <path
        d="M682.666667 896h256a42.666667 42.666667 0 0 1 0 85.333333h-256a42.666667 42.666667 0 0 1 0-85.333333zM85.333333 42.666667h256a42.666667 42.666667 0 1 1 0 85.333333H85.333333a42.666667 42.666667 0 1 1 0-85.333333z"
        p-id="1988"
      ></path>
      <path
        d="M981.333333 682.666667v256a42.666667 42.666667 0 0 1-85.333333 0v-256a42.666667 42.666667 0 0 1 85.333333 0zM128 85.333333v256a42.666667 42.666667 0 1 1-85.333333 0V85.333333a42.666667 42.666667 0 0 1 85.333333 0zM170.666667 554.666667h256a42.666667 42.666667 0 0 1 0 85.333333H170.666667a42.666667 42.666667 0 0 1 0-85.333333zM597.333333 384h256a42.666667 42.666667 0 0 1 0 85.333333h-256a42.666667 42.666667 0 0 1 0-85.333333z"
        p-id="1989"
      ></path>
      <path
        d="M72.832 875.648l290.816-290.816a42.666667 42.666667 0 1 1 60.330667 60.330667l-290.816 290.816a42.666667 42.666667 0 1 1-60.330667-60.330667zM573.952 392.746667L891.733333 74.965333a42.666667 42.666667 0 0 1 60.330667 60.330667l-317.781333 317.781333a42.666667 42.666667 0 1 1-60.330667-60.330666z"
        p-id="1990"
      ></path>
      <path
        d="M469.333333 597.333333v256a42.666667 42.666667 0 0 1-85.333333 0v-256a42.666667 42.666667 0 0 1 85.333333 0zM640 170.666667v256a42.666667 42.666667 0 0 1-85.333333 0V170.666667a42.666667 42.666667 0 1 1 85.333333 0z"
        p-id="1991"
      ></path> -->
      <path d="M34.368 784.64c18.944 0 34.368 15.36 34.368 34.304v113.408c0 12.672 10.24 22.912 22.912 22.912h113.408a34.368 34.368 0 0 1 0 68.736H57.216A57.28 57.28 0 0 1 0 966.72v-147.776c0-18.944 15.36-34.304 34.368-34.304zM205.056 68.736H91.648a22.912 22.912 0 0 0-22.912 22.912v113.408a34.368 34.368 0 0 1-68.736 0V57.216C0 25.728 25.6 0 57.28 0h147.776a34.368 34.368 0 0 1 0 68.736z m536.064 237.12a22.912 22.912 0 0 0-22.912-22.912H305.856a22.912 22.912 0 0 0-22.912 22.912v412.352c0 12.608 10.24 22.912 22.912 22.912h412.352c12.608 0 22.912-10.24 22.912-22.912V305.856z m68.672-34.368v481.024c0 31.68-25.6 57.28-57.28 57.28H271.488a57.28 57.28 0 0 1-57.28-57.28V271.488c0-31.68 25.6-57.28 57.28-57.28h481.024c31.68 0 57.28 25.6 57.28 57.28z m179.84-32.128a34.368 34.368 0 0 1-34.368-34.304V91.648a22.912 22.912 0 0 0-22.912-22.912h-113.408a34.368 34.368 0 0 1 0-68.736h147.84c31.552 0 57.216 25.6 57.216 57.28v147.776c0 18.944-15.36 34.304-34.368 34.304zM966.72 1024h-147.776a34.368 34.368 0 0 1 0-68.736h113.408c12.672 0 22.912-10.24 22.912-22.912v-113.408a34.368 34.368 0 0 1 68.736 0v147.84c0 31.552-25.6 57.216-57.28 57.216z" p-id="2237"></path>
      <!-- <path fill="#fff" d="M40.340838 345.562382A40.32431 40.32431 0 0 0 80.665148 305.156153V145.149126a64.510705 64.510705 0 0 1 64.510705-64.510704h149.152845a40.32431 40.32431 0 1 0 0-80.628141H145.155373A145.138846 145.138846 0 0 0 0.016527 145.149126v158.962568a40.32431 40.32431 0 0 0 39.136494 41.450688z m259.169196 597.799196H145.155373a64.510705 64.510705 0 0 1-64.510705-64.510704v-141.104367a40.32431 40.32431 0 0 0-80.628141 0v141.104367A145.138846 145.138846 0 0 0 145.155373 1023.989719h154.354661a40.32431 40.32431 0 1 0 0-80.628141z m685.349438-252.247095a40.32431 40.32431 0 0 0-40.324311 40.324311v146.285702a64.510705 64.510705 0 0 1-64.510704 64.510705h-149.726274a40.32431 40.32431 0 1 0 0 80.628141h149.726274a145.138846 145.138846 0 0 0 145.138845-145.138846v-145.138845a40.32431 40.32431 0 0 0-39.136494-41.450688h-1.167336zM880.024457 0.010281h-159.535997a40.32431 40.32431 0 0 0 0 80.628141H880.638844a64.510705 64.510705 0 0 1 63.916797 64.510704v158.36866a40.32431 40.32431 0 1 0 80.628141 0V145.149126A145.138846 145.138846 0 0 0 880.024457 0.010281z" /> -->
    </svg>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  name: 'Screenfull',
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: '#48576a'
    }
  },
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    click() {
      if (!screenfull.enabled) {
        // this.$message({
        //   message: 'you browser can not work',
        //   type: 'warning'
        // })
        return false
      }
      screenfull.toggle()
      this.isFullscreen = !this.isFullscreen
    }
  }
}
</script>

<style scoped>
.screenfull-svg {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 20px;
  height: 20px;
  vertical-align: 10px;
}
</style>
